<template>
  <div class="channel-edit">
<!-- 我的频道 -->
    <van-cell :border='false'>
      <template #title>
        <div class="title-text">我的频道</div>
      </template>
      <van-button type="danger" round plain size="mini" class="edit-btn" @click="isEdit=!isEdit">{{isEdit?'完成':'编辑'}}</van-button>
    </van-cell>
    <!-- 格子 -->
    <van-grid :gutter="10" class="my-grid">
      <van-grid-item v-for="(item,index) in myChannels" :key="item.id"  class="grid-item" @click="onMyChannelClick(item,index)">
        <template #icon>
          <!-- 删除图标 -->
        <van-icon name="clear" v-if="isEdit&&!fiexdChannels.includes(item.id)"></van-icon>
        </template>
        <template #text><span class="text" :class="{active:index === active}">{{item.name}}</span></template>
        </van-grid-item>
    </van-grid>
<!-- 频道推荐 -->
    <van-cell :border='false'>
      <template #title>
        <div class="title-text">频道推荐</div>
      </template>
    </van-cell>
    <!-- 格子 -->
    <van-grid :gutter="10">
  <van-grid-item v-for="item in recommendChannels" :key="item.id" :text="item.name" icon="plus" class="grid-item" @click="onAddChannel(item)"/>
</van-grid>
  </div>
</template>

<script>
import { getAllChannels } from '@/api/channel'
import { Toast } from 'vant'
import { reactive, computed, ref } from 'vue'
export default {
  name: 'ChannelEdit',
  props: {
    myChannels: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  setup (props, context) {
    loadAllChannels()
    const allChannels = reactive({ channels: [] })
    const isEdit = ref(false)// 编辑状态
    const fiexdChannels = reactive([0])// 固定频道
    async function loadAllChannels () {
      try {
        const { data } = await getAllChannels()
        allChannels.channels = data.data.channels
      } catch (err) {
        Toast('获取失败')
      }
    }
    // 频道推荐的添加
    function onAddChannel (channel) {
      // props是只读的，要用emit传到父节点操作数据
      context.emit('on-addChannel', channel)// 添加
    }
    // 我的频道的编辑与切换
    function onMyChannelClick (channel, index) {
      if (isEdit.value) {
        if (fiexdChannels.includes(channel.id)) {
          return
        } else if (index <= props.active) {
          // props中的ref数据在子元素里使用不用写value
          context.emit('update-active', props.active - 1, true)
        }
        context.emit('splice-myChannels', channel, index)// 删除
      } else {
        context.emit('update-active', index)// 切换
      }
    }
    // 频道推荐
    const recommendChannels = computed(() => {
      return allChannels.channels.filter(channel => {
        return !props.myChannels.find(myChannel => {
          return myChannel.id === channel.id// find里的!==好像会失效
        })
      })
    })
    return {
      allChannels,
      recommendChannels,
      onAddChannel,
      isEdit,
      fiexdChannels,
      onMyChannelClick
    }
  }
}
</script>

<style lang='less' scoped>
.channel-edit{
  padding: 85px 0;
  .title-text {
    font-size: 32px;
    color: #333333;
  }
  .edit-btn{
    width: 104px;
    height: 48px;
    font-size: 26px;
    color: #f85959;
    border: #f85959 1px solid;
  }
  .grid-item{
    width: 160px;
    height: 86px;
    /deep/.van-grid-item__content{
      flex-direction: row;
      background-color: #f4f5f6;
      white-space: nowrap;// 文字不折行
      .van-grid-item__text,.text{
      font-size: 28px;
      color: #222;
      margin: 0;
      }
      .active{
        color:#f85959
      }
      .van-badge__wrapper{
      font-size: 28px;
      margin-right: 6px;
      }
    }
  }
  .my-grid{
    .grid-item{
      /deep/.van-grid-item__content{
        position: relative;
        // 删除图标
      .van-badge__wrapper{
        position: absolute;
        right: -13px;
        top:-8px;
        font-size: 32px;
        color:#cacaca;
        z-index: 2;
        }
      }
    }
  }
}
</style>
